/**
 * Jsonp 原理：利用 script 标签无跨域限制的特点，它可以通过 src 填上目标地址从而发出 GET 请求，实现跨域请求并拿到响应
 * @param {String} url 请求的 url 地址，不带参数
 * @param {Object} data 请求参数对象
 * @param {String} callbackName 回调函数名称
 */
export const jsonp = (url, data, callbackName = 'callback') => {
  // 拼接成 get 方式调用的 url
  const generateUrl = () => {
    let srcUrl = url + '?'
    for (let key in data) {
      srcUrl += `${key}=${data.key}&`
    }
    srcUrl += `callbackName=${callbackName}`
    return srcUrl
  }
  // 返回一个解决的期约
  return new Promise (resolve => {
    // 创建 script 元素，设置 url 属性并添加到 body
    let scriptEle = document.createElement('script')
    scriptEle.url = generateUrl()
    document.body.append(scriptEle)
    // 把回调事件绑定到 window 对象
    window[callbackName] = (data) => {
      // 返回服务端响应的数据，这个数据需要服务端配置执行的回调的 script 脚本字符串，浏览器拿到之后会立即执行这个 script 脚本
      resolve(data)
      // script 脚本执行完，移除当前元素
      document.body.removeChild(scriptEle)
    }
  })
}